---
slug: ../../List
---

import Basic from "../../../_samples/main/List/Basic/Basic.md";
import Growing from "../../../_samples/main/List/Growing/Growing.md";
import GrowingOnButtonPress from "../../../_samples/main/List/GrowingOnButtonPress/GrowingOnButtonPress.md";
import Modes from "../../../_samples/main/List/Modes/Modes.md";
import NoData from "../../../_samples/main/List/NoData/NoData.md";
import GroupHeaders from "../../../_samples/main/List/GroupHeaders/GroupHeaders.md";
import SeparationTypes from "../../../_samples/main/List/SeparationTypes/SeparationTypes.md";
import DragAndDrop from "../../../_samples/main/List/DragAndDrop/DragAndDrop.md";
import MultipleDrag from "../../../_samples/main/List/MultipleDrag/MultipleDrag.md";
import WrappingBehavior from "../../../_samples/main/List/WrappingBehavior/WrappingBehavior.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Growing On Scroll
The List fires an <b>load-more</b> event when the user scrolls to the bottom.
The event can be used for loading more data (items) as shown in the sample.

<Growing />

### Growing On Button Press
The List fires an <b>load-more</b> event when the user clicks to the "Load More" button at the bottom.
The event can be used for loading more data (items) as shown in the sample.

<GrowingOnButtonPress />

### Selection Modes
The List supports several selection modes <b>None</b>, <b>Single</b>, <b>SingleStart</b>, <b>SingleEnd</b>, <b>SingleAuto</b>, <b>Multiple</b> and <b>Delete</b>.
<Modes />

### No data
You can show a text when there aren't items (data) via the <b>noDataText</b> property.

<NoData />

### Grouping
The <b>The ListItemGroup</b> can be used to start group section and implement grouping.

<GroupHeaders />

### Separators
The <b>separators</b> options (<b>All</b>, <b>Inner</b>, <b>None</b>) allows the outer lines (Inner) or all the lines (None) to be hidden.

<SeparationTypes />

### Drag And Drop
The list items are draggable through the use of the <b>movable</b> property on <b>ListItem</b>.

<DragAndDrop />

### Multiple Item Drag
You can select and drag multiple items at once when using <b>selection-mode="Multiple"</b>. This sample demonstrates cross-list dragging and the multiple drag ghost feature.

<MultipleDrag />

### Wrapping Behavior
The standard list item `<ui5-li>` and the list item group `<ui5-li-group>` supports text wrapping through the <b>wrappingType</b> property. When set to "Normal", long text content (title and description) will wrap to multiple lines instead of truncating with an ellipsis. For very long content, the text is displayed with a "Show More/Show Less" mechanism.

The wrapping behavior is responsive:
- On mobile devices (size S), text is truncated after 100 characters
- On tablets and desktop (size M and larger), text is truncated after 300 characters

This feature improves readability when displaying lengthy content in lists.

The `<ui5-li-custom>` is intentionally designed as a generic container to provide maximum flexibility. It can be used alongside `ui5-expandable-text` for long text content.

<WrappingBehavior />
